<template>
  <view class="container">
    <view class="scan-section">
      <image class="scan-icon" src="/static/images/scan.png" mode="aspectFit"></image>
      <view class="scan-text">扫描二维码登录</view>
      <button class="scan-btn" @click="goToScan">开始扫码</button>
    </view>
    
    <view class="debug-panel" v-if="showDebug">
      <view class="debug-title">调试信息</view>
      <view class="debug-item">
        <text>扫码状态：{{scanStatus}}</text>
      </view>
      <view class="debug-item">
        <text>最后操作时间：{{lastOperationTime}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showDebug: true,
      scanStatus: '等待扫码',
      lastOperationTime: '-'
    }
  },
  onLoad() {
    console.log('【index.vue】页面加载完成');
  },
  methods: {
    goToScan() {
      console.log('【index.vue】点击开始扫码，准备跳转到scan页面');
      this.updateDebugInfo('准备扫码')
      uni.navigateTo({
        url: '/pages/scan/scan'
      })
    },
    updateDebugInfo(status) {
      console.log('【index.vue】更新调试信息:', status);
      this.scanStatus = status
      this.lastOperationTime = new Date().toLocaleString()
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}

.scan-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100rpx;
}

.scan-icon {
  width: 200rpx;
  height: 200rpx;
}

.scan-text {
  margin: 30rpx 0;
  font-size: 32rpx;
  color: #333;
}

.scan-btn {
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 40rpx;
  margin-top: 40rpx;
}

.debug-panel {
  margin-top: 60rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}

.debug-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.debug-item {
  font-size: 24rpx;
  color: #999;
  margin: 10rpx 0;
}
</style> 